Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.09.2019, 16:38
Профессор
Отправить личное сообщение для Julia1991 Посмотреть профиль Найти все сообщения от Julia1991
 
Регистрация: 13.08.2017
Сообщений: 167

Динамическая смена содержимого div
Есть div в который подгружается карта. По умолчанию вместо этого блока отображается другой div с другим id (в этом блоке картинка). По нажатию на эту картинку меняется id на id блока с картой. В общем должно подгрузиться содержимое блока с картой. С помощью метода load() у меня получилось сделать, но подскажите как сделать без перезагрузки блока?
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2019, 16:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,149

Julia1991,
подожду телепатов.
Ответить с цитированием
  #3 (permalink)  
Старый 05.09.2019, 21:39
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Julia1991
Есть div в который подгружается карта. По умолчанию вместо этого блока отображается другой div с другим id (в этом блоке картинка). По нажатию на эту картинку меняется id на id блока с картой. В общем должно подгрузиться содержимое блока с картой. С помощью метода load() у меня получилось сделать, но подскажите как сделать без перезагрузки блока?
Вместо того, чтобы писать загадочно, и в терминах элементов, лучше напишите, как пример должен работать с точки зрения человека. Например, есть картинка местности, при нажатии на неё должна вместо картинки появиться карта той местности... Такое можно сделать так...
<!DOCTYPE html>
<html>
<body>

	<button lat="47.5550479" lng="10.7492965" is="map-app">
		<img src="https://picsum.photos/id/1040/500/400">
	</button>
	
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1EguMI4GxbUwHxlH-CE9ZtC4KnJQzaeY">
	</script>
	<script>
		
function initMap(node) {
	var center = {
		lat: Number(node.getAttribute("lat")),
		lng: Number(node.getAttribute("lng")),
	};
	var map = new google.maps.Map(node, { zoom: 15, center });
	var marker = new google.maps.Marker({
		position: center,
		map
	});
	node.mapIsInitialized = true;
}
document.addEventListener("click", (event) => {
	const button = event.target.closest("button[is='map-app']");
	if (button && !button.mapIsInitialized) {
		initMap(button);
	}
});
		
	</script>
	<style>
	
button[is="map-app"] {
	all: unset;
	position: relative;
	width: 500px;
	max-width: 100vw;
	height: 400px;
}
		
	</style>
	
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
открытие div и смена текста в a (ссылка) rognarek Events/DOM/Window 9 03.08.2018 14:50
Смена цвета div по нажатию Tempest Общие вопросы Javascript 5 23.05.2018 18:51
Как отслеживать изменение содержимого тега div? raja Общие вопросы Javascript 1 17.07.2017 14:12
Скрипт для показа/скрытия содержимого div follor Элементы интерфейса 2 22.02.2015 18:17
resize содержимого div при его вырезании в другой div yriiarutiunian Общие вопросы Javascript 5 06.06.2014 08:54